<template>
    <el-dialog v-model="showDialog" :title="t('refundTitle')" width="800px" class="diy-dialog-wrap" :destroy-on-close="true">
        <div v-loading="loading">
            <el-alert type="warning" :closable="false" class="!mb-[10px]">
                <template #default>
                    <p>商家主动退款功能仅作为退款维权业务的补充功能，请勿过度依赖和使用。此功能支持多次退款操作。</p>
                    <p>如果订单项全部退款，运费将在最后一次退款时一并退还，同时使用的优惠券也将返还给用户，退款金额将原路返还至用户的支付账户。</p>
                </template>
            </el-alert>
            <el-form :model="formData" label-width="100px" ref="formRef" :rules="formRules" class="page-form mb-[30px]">
                <el-form-item :label="t('refundMoney')">
                    <div class="text-[red]">
                        <span>￥{{ formData.refund_money }}</span>
                        <span v-if="isShowDelivery" class="text-[#999] text-[24rpx]">（运费:￥{{formData.delivery_money}}）</span>
                    </div>
                </el-form-item>
                <el-form-item :label="t('refundGoodsItem')">
                    <el-table :data="refundTable" size="large" ref="refundTableRef" @select="refundSelectChange" @select-all="refundSelectAll" :header-cell-class-name="hideAllCheckbox">
                        <el-table-column type="selection" width="40" :selectable="selectable" />
                        <el-table-column align="left" min-width="200" :label="t('refundGoodsInfo')">
                            <template #default="{ row }">
                                <div class="flex cursor-pointer">
                                    <div v-if="!['2', '6'].includes(row.alcohol_type)" class="flex items-center min-w-[50px] mr-[10px]">
                                        <img class="w-[50px] h-[50px]" v-if="row.goods_image" :src="img(row.goods_image)" />
                                        <img class="w-[50px] h-[50px]" v-else src="" />
                                    </div>
                                    <div class="flex flex-col items-start">
                                        <el-tooltip class="box-item" effect="light" placement="top">
                                            <template #content>
                                                <div class="max-w-[250px]">{{row.goods_name}}</div>
                                            </template>
                                            <p class="multi-hidden text-[14px]">{{ row.goods_name }}</p>
                                        </el-tooltip>
                                        <span class="text-[12px] text-[#999] truncate">{{ row.sku_name }}</span>
                                        <span class="px-[4px]  text-[12px] text-[#fff] rounded-[4px] bg-primary leading-[18px]" v-if="row.is_gift == 1">赠品</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="60" :label="t('refundPayPrice')">
                            <template #default="{ row }">
                                <div class="flex flex-col">
                                    <span class="text-[13px]">￥{{ row.refund_money }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="80" :label="t('refundGoodsPrice')">
                            <template #default="{ row }">
                                <div class="flex flex-col">
                                    <span class="text-[13px]">￥{{ row.price }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column min-width="60" :label="t('refundGoodsNum')">
                            <template #default="{ row }">
                                <div class="flex flex-col">
                                    <span class="text-[13px] mt-[5px]">{{ row.num }}{{ t('piece') }}</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item :label="t('refundInstructions')" prop="shop_active_refund_remark">
                    <el-input v-model.trim="formData.shop_active_refund_remark" :rows="5" type="textarea" maxlength="200" show-word-limit />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
                <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ t('confirm') }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick } from 'vue'
import { t } from '@/lang'
import { img } from '@/utils/common'
import { FormInstance, ElMessage } from 'element-plus'
import { shopActiveRefund, shopActiveRefund2, getOrderDetail } from '@/addon/shop/api/order'
import { cloneDeep } from 'lodash-es'
const showDialog = ref(false)
const loading = ref(false)

/**
 * 表单数据
 */
const initialFormData = {
    order_id: '',
    order_goods_ids: [],
    refund_money: 0,
    shop_active_refund_remark: '',
    alcohol_type: 0
}

const refundTable = ref([]);
const refundTableRef: Record<string, any> | null = ref(null)
const formData: Record<string, any> = reactive({ ...initialFormData })
const formRef = ref<FormInstance>()
const formRules = reactive({})
let refundItemNum = 0; //表示可退款项数量
let isShowDelivery = ref(false);
const customTypes = ref<any>({
    1: '全新定制',
    2: '基于现有酒体优化',
    3: '自行寄样对标调制',
})

const emit = defineEmits(['complete'])

// 监听选择
const refundSelectChange = (selection: any[])=>{
    formData.refund_money = 0;
    isShowDelivery.value = false;
    formData.order_goods_ids = [];
    selection.forEach((item: any) => {
        formData.refund_money += item.refund_money;
        formData.order_goods_ids.push(item.order_goods_id);
    });
    if(selection.length == refundItemNum){
        formData.refund_money += parseFloat(formData.delivery_money);
        isShowDelivery.value = true;
    }
    formData.refund_money = formData.refund_money.toFixed(2);
}

// 全选
const refundSelectAll = (selection: any[])=>{
    formData.refund_money = 0;
    isShowDelivery.value = false;
    formData.order_goods_ids = [];
    selection.forEach((item: any) => {
        formData.refund_money += item.refund_money;
        formData.order_goods_ids.push(item.order_goods_id);
    });
    if(selection.length == refundItemNum){
        formData.refund_money += parseFloat(formData.delivery_money);
        isShowDelivery.value = true;
    }
    formData.refund_money = formData.refund_money.toFixed(2);
}

const selectable = (row:any, index:number) => {
    let bool = false
    if (row.status == 1) {
        bool = true
    }
    if (row.is_gift == 1) {
        bool = false
    }
    if (![0, 3, 4].includes(formData.alcohol_type)) {
        bool = false
    }
    return bool
}

/**
 * 确认
 * @param formEl
 */
const confirm = async (formEl: FormInstance | undefined) => {
    if (loading.value || !formEl) return
    if (formData.order_goods_ids.length <= 0) {
        ElMessage({
            message: t('refundGoodsPlaceholder'),
            type: 'warning'
        })
        return
    }

    await formEl.validate(async (valid) => {
        if (valid) {
            loading.value = true
            if ([1, 2, 5, 6, 7, 8].includes(formData.alcohol_type)) {
                const data = {
                    order_id: formData.order_id,
                    shop_active_refund_money: formData.refund_money,
                    shop_active_refund_remark: formData.shop_active_refund_remark,
                };
                shopActiveRefund2(data).then(res => {
                    showDialog.value = false
                    emit('complete')
                    initFormData();
                }).finally(() => {
                    loading.value = false
                })
            } else {
                const data = cloneDeep(formData)
                data.shop_active_refund_money = formData.refund_money;
                delete data.refund_money;
                shopActiveRefund(data).then(res => {
                    showDialog.value = false
                    emit('complete')
                    initFormData();
                }).finally(() => {
                    loading.value = false
                })
            }
        }
    })
}

const setFormData = async (row: any = null) => {
    loading.value = true;
    refundTable.value = [];
    if (row) {
        refundItemNum = 0;
        formData.refund_money = 0;
        formData.order_goods_ids = [];
        formData.alcohol_type = row.alcohol_type;
        formData.order_id = row.order_id;
        let list = <any>cloneDeep(row.order_goods);
        console.log(row)
        list.forEach((item: any) => {
            if ([1, 5].includes(row.alcohol_type)) {
                item.goods_image = item.alcohol_body_image;
                item.goods_name = item.alcohol_body_name;
                item.sku_name = '勾调一杯乐(' + item.alcohol_sku + 'ml)';
                item.refund_money = (parseFloat(item.alcohol_sku_price) * item.num) - parseFloat(item.discount_money || '0');
                item.price = item.original_price;
            } else if ([2, 6].includes(row.alcohol_type)) {
                item.dingzhi_type = row.dingzhi_type
                if (row.alcohol_type == 2 && !['1', '6', '7'].includes(row.status)) {
                    item.refund_money = parseFloat(row.goods_money) + parseFloat(row.final_money);
                } else {
                    item.refund_money = parseFloat(row.goods_money);
                }
                item.goods_name = customTypes[row.dingzhi_type];
                item.sku_name = '国匠一杯乐(' + item.order_sku + 'ml)';
                item.price = row.goods_money;
            } else if ([3, 4].includes(row.alcohol_type)) {
                item.refund_money = parseFloat(item.goods_money);
                item.sku_name = row.alcohol_type == 3 ? '大师基础配方' : '标准酒体'
            } else if ([7, 8].includes(row.alcohol_type)) {
                item.goods_image = row.goods_sku?.sku_image;
                item.goods_name = row.goods_sku?.goods?.goods_name;
                item.refund_money = (parseFloat(item.goods_sku_price) * item.num) - parseFloat(item.discount_money || '0');
                item.sku_name = (row.alcohol_type == 7 ? '大师基础配方(' : '标准酒体(') + row.order_sku + 'ml)'
                item.price = row.goods_sku?.price;
            } else {
                item.refund_money = item.goods_money - item.discount_money;
            }
            refundItemNum++;
            formData.refund_money += item.refund_money;
            formData.order_goods_ids.push(item.order_goods_id);
        });
        if ([5, 6, 7, 8].includes(row.alcohol_type)) {
            const { data } = await getOrderDetail(row.order_id);
            const num = row.order_alcohol.length ? row.order_alcohol[0].num : 1;
            data.sku_list?.forEach((item: any) => {
                list.push({
                    ...item,
                    order_goods_id: item.goods_id,
                    goods_name: item.goods?.goods_name,
                    goods_image: item.sku_image,
                    num,
                    refund_money: parseFloat(item.price) * num,
                    sku_name: '包材',
                    status: 1
                })
                formData.refund_money += parseFloat(item.price) * num;
                formData.order_goods_ids.push(item.goods_id);
            })
        }
        refundTable.value = list;
        console.log(row, refundTable.value)
        formData.delivery_money = row.delivery_money;
        formData.refund_money += parseFloat(row.delivery_money);
        formData.refund_money = formData.refund_money.toFixed(2);
        isShowDelivery.value = true;

        formData.shop_active_refund_remark = '';
    }
    nextTick(()=>{
        setTimeout(()=>{
            refundTable.value.forEach((item: any) => {
                refundTableRef.value.toggleRowSelection(item, true);
            });
            // refundTableRef.value.toggleAllSelection();
        },100)
    })
    loading.value = false
}

const hideAllCheckbox = ({ columnIndex }: any) => {
    const type = formData.alcohol_type;
    if (columnIndex === 0 && ![0, 3, 4].includes(type)) return "setDisable";
}

const initFormData = ()=> {
    formData.order_goods_id = 0
    formData.refund_money = 0
    formData.shop_active_refund_status = 'partial_refund'
    formData.shop_active_money_type = 'back_refund'
    formData.shop_active_refund_remark = ''
}

defineExpose({
    showDialog,
    setFormData
})
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.diy-dialog-wrap .el-form-item__label {
    height: auto !important;
}
.setDisable {
  .cell {
    visibility: hidden;
  }
}
</style>
